<html>

<head>
<title>pymq Admin Console</title>

<style>
input, textarea, {
	display: inline-block;
}
.clear-both {
	clear: both;
}
body {
	padding-left: 10px;
}
.queue-list {
	padding-top: 15px;
	width: 900px;
}
.queue-odd {
}
.queue-even {
	background-color: #F0F7F9;
}
.queue-name {
	display: inline-block;
	width: 240px;
}
.queue-db {
	display: inline-block;
	width: 100px;
}
.queue-status {
	display: inline-block;
	width: 140px;
}
.queue-title {
	font-weight: bold;
	padding-bottom: 10px;
}
.queue-item {
	margin-bottom: 5px;
}
a {
	cursor: pointer;
	text-decoration: underline;
	color: blue;
}
a:hover {
	color: #CC4400;
}
.db-list {
	padding-top: 10px;
}
.db-list-title {
	font-weight: bold;
	padding-bottom: 5px;
}
.add-db {
	padding-top: 5px;
}
.add-queue {
	padding-top: 10px;
}
.queue-details {
	padding-top: 10px;
}
.queue-actions {
	float: left;
	width: 66%;
}
.queue-stats {
	float: left;
	width: 34%;
}
.message-input {
	width: 300px;
}
.ack-input {
	width: 60px;
}
.file-input {
	width: 364px;
}
.send-message,.receive-message,.load-queue,.dump-queue {
	margin-bottom: 6px;
}
.stats-title {
	font-weight: bold;
}
#templates {
	display: none;
}
.smiley {
	height:20px;
	width:20px;
	display: inline-block;
}
.smiley-happy {
	background-image:url("/_ah/view/static/images/smileys.jpg");
	background-position:-6px -5px;
	background-repeat:no-repeat;
}
.smiley-sad {
	background-image:url("/_ah/view/static/images/smileys.jpg");
	background-position:-6px -30px;
	background-repeat:no-repeat;
}
</style>

<script src="static/scripts/jquery.min.js"></script>
<script src="static/scripts/pymq.js"></script>

</head>


<body>

<h1>pymq Admin Console</h1>

<div id='templates' style='width: 900px;'>
  <div class='queue-item'>
    <span class='queue-name'></span>
    <span class='queue-db'></span>
    <span class='queue-status'>Running</span>
    <span>Reject [ <a class='reject-all'>All</a>&nbsp;
    			   <a class='reject-consumers'>Consumers</a>&nbsp;
    			   <a class='reject-producers'>Producers</a> ]&nbsp;
    			   <a class='resume-queue'>Accept All</a>&nbsp;
    			   (<a class='more-queue-options'>more</a>)
    </span>
  </div>
  
  <div class='queue-details'>
    <div class='queue-actions'>
      <div class='send-message'>
        <input type='text' class='message-input' value='Test message' />
        <input type='text' class='ack-input' value='0' /> <a class='send-ack-link'>Send and ACK</a>
        <span class='smiley'></span>
      </div>
      <div class='receive-message'>
        <input type='text' class='message-input' value='You will see the received message here' />
        <input type='text' class='ack-input' value='0' /> <a class='receive-ack-link'>Receive and ACK</a>
        <span class='smiley'></span>
      </div>
      <div class='dump-queue'>
        <input type='text' class='file-input' value='Specify the file name to dump to here' /> 
        <a class='dump-queue-link'>Dump to File</a>
        <span class='smiley'></span> <span class='num-rows'></span>
      </div>
      <div class='load-queue'>
        <input type='text' class='file-input' value='Specify the file name to load from here' /> 
        <a class='load-queue-link'>Load from File</a>
        <span class='smiley'></span> <span class='num-rows'></span>
      </div>
      
    </div>

    <div class='queue-stats'>
      <div class='stats-title'>
        This Session &nbsp;&nbsp;<a class='refresh-stats'>Refresh</a>
      </div>
    
    </div>
    <div class='clear-both'></div>
  </div>
  
  
  <table class='stats-table' border="0" width="100%">
    <tr>
      <td>Status:</td>
      <td class='stats-queue-status'></td>
    </tr>
    <tr>
      <td>Waiting consumers:</td>
      <td class='stats-waiting-consumers'></td>
    </tr>
    <tr>
      <td>Messages In:</td>
      <td class='stats-messages-in'></td>
    </tr>
    <tr>
      <td>Messages Out:</td>
      <td class='stats-messages-out'></td>
    </tr>
    <tr>
      <td>In Rate:</td>
      <td class='stats-in-rate'></td>
    </tr>
    <tr>
      <td>Out Rate:</td>
      <td class='stats-out-rate'></td>
    </tr>
  </table>  
</div>


<div class='db-list'>
  <div class='db-list-title'>List of Existing databases</div>
</div>

<div class='add-db'>
  <input type='text' value='' id='db-to-add' />
  &nbsp;&nbsp;<a id='add-db-now-link'>Add this DB now</a>
</div>

<div class='add-queue'>
  Add a new queue <input type='text' value='' id='queue-to-add' /> 
  in
  <select id='new-queue-status'>
  	<option value='running' default>Running</option>
  	<option value='rejectAll'>Rejecting All</option>
  </select> state
  &nbsp;&nbsp;<a id='add-queue-now-link'>Now</a>
</div>

<div class='queue-list'>
  <div class='queue-title'>
    <span class='queue-name'>Queue Name</span>
    <span class='queue-db'>Owner DB</span>
    <span class='queue-status'>Status</span>
    <span>Actions</span>
  </div>

</div>

<div class='clear-both'></div>


<script type="text/javascript">
$(document).ready(function() {

	var nextQueue = 0;
	
	var forQueue = function(elem) {
		// console.log("parents: ", $(elem).parents('.queue-item'));
		return $(elem).parents('.queue-item').attr('queueName');
	}
	
	var clearSmiley = function(parent) {
		parent.find('.smiley')
			  .removeClass('smiley-happy')
			  .removeClass('smiley-sad');
	}
	
	$('.reject-all').live('click', function() {
		var that = this;
		$pymq.rejectAll({
			queue: forQueue(this), 
			success: function() {
				$(that).parents('.queue-item')
					   .find('.queue-status')
					   .html('Rejecting All');
			}
		});
	});

	$('.reject-consumers').live('click', function() {
		var that = this;
		$pymq.rejectConsumers({
			queue: forQueue(this), 
			success: function() {
				$(that).parents('.queue-item')
					   .find('.queue-status')
					   .html('Rejecting Consumers');
			}
		});
	});

	$('.reject-producers').live('click', function() {
		var that = this;
		$pymq.rejectProducers({
			queue: forQueue(this), 
			success: function() {
				$(that).parents('.queue-item')
					   .find('.queue-status')
					   .html('Rejecting Producers');
			}
		});
	});

	$('.resume-queue').live('click', function() {
		var that = this;
		$pymq.resumeQueue({
			queue: forQueue(this), 
			success: function() {
				$(that).parents('.queue-item')
					   .find('.queue-status')
					   .html('Running');
			}
		});
	});

	$('.send-ack-link').live('click', function() {
		var that = this;
		var parent = $(this).parent();
		clearSmiley(parent);
		$pymq.sendMessage({
			queue: forQueue(this),
			data: parent.find('.message-input').val(), 
			ack: parent.find('.ack-input').val(),
			success: function() {
				parent.find('.smiley').addClass('smiley-happy');
			}, 
			error: function() {
				parent.find('.smiley').addClass('smiley-sad');
			}
		});
	});

	$('.receive-ack-link').live('click', function() {
		var that = this;
		var parent = $(this).parent();
		clearSmiley(parent);
		$pymq.receiveMessage({
			queue: forQueue(this),
			ack: parent.find('.ack-input').val(),
			success: function(data, status, xhr) {
				parent.find('.smiley').addClass('smiley-happy');
				parent.find('.message-input').val(data);
				parent.find('.ack-input').val(xhr.getResponseHeader("X-MessageID"));
			}, 
			error: function() {
				parent.find('.smiley').addClass('smiley-sad');
			}
		});
	});

	$('.dump-queue-link').live('click', function() {
		var that = this;
		var parent = $(this).parent();
		clearSmiley(parent);
		parent.find('.num-rows').html('');
		$pymq.dumpQueue({
			queue: forQueue(this),
			fileName: parent.find('.file-input').val(), 
			success: function(data) {
				parent.find('.smiley').addClass('smiley-happy');
				console.log("data: ", data);
				parent.find('.num-rows').html(data + " rows dumped");
			}, 
			error: function() {
				parent.find('.smiley').addClass('smiley-sad');
			}
		});
	});

	$('.load-queue-link').live('click', function() {
		var that = this;
		var parent = $(this).parent();
		clearSmiley(parent);
		parent.find('.num-rows').html('');
		$pymq.loadQueue({
			queue: forQueue(this),
			fileName: parent.find('.file-input').val(), 
			success: function(data) {
				parent.find('.smiley').addClass('smiley-happy');
				console.log("data: ", data);
				parent.find('.num-rows').html(data + " rows loaded");
			}, 
			error: function() {
				parent.find('.smiley').addClass('smiley-sad');
			}
		});
	});

	
	$('.refresh-stats').live('click', function() {
		var refreshStats = $(this);
		$pymq.queueStats({
			queue: forQueue(this), 
			success: function(stats) {
				var queueStatsDiv = refreshStats.parents('.queue-stats');
				var statsTable = $('#templates .stats-table').clone();
				statsTable.find('.stats-queue-status').html(queueStatusString(stats.status));
				statsTable.find('.stats-waiting-consumers').html(stats.numWaitingConsumers);
				statsTable.find('.stats-messages-in').html(stats.messagesIn);
				statsTable.find('.stats-messages-out').html(stats.messagesOut);
				statsTable.find('.stats-in-rate').html(Math.floor(stats.incomingRate * 100.0) / 100.0 + "/sec");
				statsTable.find('.stats-out-rate').html(Math.floor(stats.outgoingRate * 100.0) / 100.0 + "/sec");
				queueStatsDiv.find('.stats-table').remove();				
				queueStatsDiv.append(statsTable);
			}
		});
	});

	$('.more-queue-options').live('click', function() {
		if ($(this).html() == 'more') {
			var moreOptions = $('#templates .queue-details').clone();
			$(this).parents('.queue-item').append(moreOptions);
			moreOptions.find('.refresh-stats').click();
			$(this).html('less');
		}
		else {
			$(this).parents('.queue-item').find('.queue-details').remove();
			$(this).html('more');
		}
	});
	
	$('#add-db-now-link').click(function() {
		var dbToAdd = jQuery.trim($('#db-to-add').val());
		if (!dbToAdd) {
			return;
		}
		$pymq.addDB({
			db: dbToAdd, 
			success: function() {
				var newDB = $("<div></div>").addClass("db-item").html(dbToAdd);
				$('.db-list').append(newDB);
			}
		});
	});

	$('#add-queue-now-link').click(function() {
		var queueName = jQuery.trim($('#queue-to-add').val());
		if (!queueName) {
			return;
		}
		var queueStatus = $('#new-queue-status').val();
		if (queueStatus == "running") {
			$pymq.addQueue({
				queue: queueName, 
				success: function(queue) {
					var item = getNewQueueItem(queue, nextQueue);
					nextQueue += 1;
					$('.queue-list').append(item);
				}
			});
		}
		else {
			$pymq.rejectAll({
				queue: queueName, 
				success: function(queue) {
					var item = getNewQueueItem(queue, nextQueue);
					item.find('.queue-status').html("Rejecting All");
					nextQueue += 1;
					$('.queue-list').append(item);
				}
			});
		}
	});
	
	var getNewQueueItem = function(queue, i) {
		var queueItem = $('#templates .queue-item').clone();
		queueItem.attr('queueName', queue.queueName);
		if ((i % 2) == 1) {
			queueItem.addClass('queue-odd');
		}
		else {
			queueItem.addClass('queue-even');
		}
		queueItem.find('.queue-name').html(queue.queueName);
		queueItem.find('.queue-db').html(queue.ownerDB);
		queueItem.find('.queue-status').html(queueStatusString(queue.status));
		return queueItem;
	}
	
	var queueStatusString = function(statusCode) {
		return {
			0: "Running", 
			1: "Rejecting Consumers", 
			2: "Rejecting Producers", 
			3: "Rejecting All"
		}[statusCode];
	}
	
	var loadAllQueuesAndDBs = function() {
		$pymq.dbList({
			success: function(allDBs) {
				for (var db in allDBs) {
					var dbList = $('.db-list');
					$("<div></div>").addClass('db-item').html(db).appendTo(dbList);
				}
			}
		});
	
		$pymq.queueList({
			success: function(allQueues) {
				var queueListDiv = $('.queue-list');
				var i = 0;
				for (i in allQueues) {
					var queue = allQueues[i];
					var queueItem = getNewQueueItem(queue, nextQueue);
					nextQueue += 1
					queueListDiv.append(queueItem);
				}
			}
		});
	}

	loadAllQueuesAndDBs();	
	
});

</script>

</body>
</html>